<template>
  <div class="profile-container">
    <div class="profile-header">
      <h1>个人中心</h1>
      <el-button type="primary" @click="editProfile">编辑资料</el-button>
    </div>

    <div v-if="user" class="profile-card">
      <div class="avatar-section">
        <label class="avatar-uploader">
          <img :src="user.avatar" alt="用户头像" class="avatar">
          <input
              type="file"
              accept="image/*"
              @change="handleAvatarUpload"
              style="display: none;"
          >
          <div class="upload-overlay">
            <i class="el-icon-camera"></i>
          </div>
        </label>
        <h2>{{ user.username }}</h2>
      </div>

      <div class="info-section">
        <el-descriptions border :column="1" class="info-table">
          <el-descriptions-item label="真实姓名">{{ user.realName }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ user.phone }}</el-descriptions-item>
          <el-descriptions-item label="所属机构">{{ user.organization }}</el-descriptions-item>
          <el-descriptions-item label="角色">{{ user.role }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <div v-else class="no-user-info">
      <el-empty description="未找到用户信息，请先登录。" :image-size="200">
        <template #description>
          <span class="empty-text">请先登录以查看个人信息</span>
        </template>
        <template #bottom>
          <el-button type="primary" @click="goToLogin">立即登录</el-button>
        </template>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useAuthStore } from '@/stores/authStore';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const authStore = useAuthStore();
const router = useRouter();

const user = computed(() => authStore.user);

// 编辑资料
const editProfile = () => {
  router.push('/profile/edit');
  ElMessage.info('即将跳转到编辑资料页面');
};

// 前往登录页面
const goToLogin = () => {
  router.push('/login');
};

// 处理头像上传
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('avatar', file);

    try {
      // 调用模拟 API 上传头像
      const response = await axios.post('/api/upload-avatar', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      if (response.data.code === 200) {
        const avatarUrl = response.data.avatarUrl;
        // 更新本地状态
        authStore.updateAvatar(avatarUrl);
        ElMessage.success('头像更新成功');
      } else {
        ElMessage.error(response.data.message);
      }
    } catch (error) {
      ElMessage.error('头像更新失败，请重试');
    }
  }
};
</script>

<style scoped>
.profile-container {
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Microsoft YaHei', sans-serif;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.profile-header h1 {
  color: #1c3f60;
  font-size: 28px;
  font-weight: bold;
}

.profile-card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.avatar-section {
  text-align: center;
  margin-bottom: 30px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.avatar-section h2 {
  color: #1c3f60;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.info-section {
  padding: 20px;
}

.info-table {
  font-size: 16px;
}




.no-user-info {
  text-align: center;
}

.empty-text {
  color: #999;
  font-size: 16px;
}
</style>